<template>
    <div>
        <div class="toggle-button" @click="toggleCollapse">|||</div>
        <el-menu :default-active="activeURL" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
            :collapse="isCollapse" background-color="#ffffff" text-color="black" active-text-color="#409FFF"
            :unique-opened="true" :collapse-transition="true">
            <el-menu-item @click="clickMenu(item)" v-for="item in noChilden" :key="item.name" :index="item.name">
                <i :class="item.icon"></i>
                <span slot="title">{{ item.label }}</span>
            </el-menu-item>
            <!-- v-show="getUserType == 0 && item.name != 'home'" -->
            <el-submenu v-for="item in hasChilden" :key="item.name" :index="item.name">
                <template slot="title">
                    <i :class="item.icon"></i>
                    <span slot="title">{{ item.label }}</span>
                </template>
                <el-menu-item-group v-for="subItem in item.children" :key="subItem.path">
                    <el-menu-item @click="clickMenu(subItem)" :index="subItem.path">{{ subItem.label }}</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
        </el-menu>
    </div>
</template>
  
<script>
import { mapMutations } from 'vuex';
import Cookie from 'js-cookie';

export default {
    name: "CommonAside",
    data() {
        return {
            menuData: [
                {
                    path: '/home',
                    name: 'home',
                    label: '首页',
                    icon: 'el-icon-s-home',
                    url: 'Home/Home'
                },
                {
                    path: '/user',
                    name: 'user',
                    label: '用户管理',
                    icon: 'el-icon-user',
                    url: 'User/User'
                },
                {
                    label: '商品信息管理',
                    icon: 'el-icon-goods',
                    name: 'server',
                    children: [
                        {
                            path: '/productdetails',
                            name: 'productdetails',
                            label: '商品信息',
                            icon: 'el-icon-s-custom',
                            url: ''
                        }
                    ]
                }
            ],
        };
    },
    methods: {
        handleOpen(key, keyPath) {
            // console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            // console.log(key, keyPath);
        },
        clickMenu(item) {
            //  当页面的与跳转的路由不一致才允许跳转
            if (this.$route.path !== item.path && !(this.$route.path === '/home' && (item.path === '/'))) {
                this.$router.push(item.path)
            }
            this.$store.commit('tab/selectMenu', item)
        },
        // ...mapMutations('tab',{'collapsMenu':collapsMenu}),
        // 点击按钮切换左侧菜单的折叠与展开
        toggleCollapse() {
            this.$store.commit('tab/collapsMenu')
        },
    },
    computed: {
        //  设置当前默认激活路径（高亮显示）
        activeURL() {
            return this.$route.path
        },
        //  没有子菜单
        noChilden() {
            return this.menuData.filter((item) => !item.children)
        },
        //  没有子菜单
        hasChilden() {
            return this.menuData.filter((item) => item.children)
        },
        isCollapse() {
            return this.$store.state.tab.isCollapse
        },
        getUserType(){
            return JSON.parse(Cookie.get("userInfo")).token
        }
    }
}
</script>

<style lang="less" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
}

.toggle-button {
    background-color: #ffffff  ;
    color: black;
    font-size: 14px;
    text-align: center;
    line-height: 30px;
    letter-spacing: 2px;
    cursor: pointer;
}

.el-menu {
    height: 100vh;
    border-right: none;

    h3 {
        color: #fff;
        text-align: center;
        line-height: 48px;
        font-weight: 400;
    }
}
</style>